<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.title" clearable class="filter-item" style="width: 200px;" :placeholder="$t('product.list.searchPlaceholder')" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('product.list.search') }}</el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">{{ $t('product.list.create') }}</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      :element-loading-text="$t('product.list.searching')"
      border
      fit
      highlight-current-row
    >

      <el-table-column align="center" :label="$t('product.list.id')" width="80" prop="id" />

      <el-table-column align="center" min-width="100" :label="$t('product.list.title')" prop="title" />

      <el-table-column align="center" :label="$t('product.list.img')" property="img">
        <template slot-scope="scope">
          <img :src="scope.row.img + '?x-oss-process=style/100px'" width="40">
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('product.list.deviceNum')" prop="deviceNum" />

      <el-table-column align="center" :label="$t('product.list.deviceOnlineNum')" prop="deviceOnlineNum" />

      <el-table-column align="center" :label="$t('product.list.dataNum')" prop="dataNum" />

      <el-table-column align="center" :label="$t('product.list.controllerNum')" prop="controllerNum" />

      <el-table-column align="center" :label="$t('product.list.gmtCreate')" prop="gmtCreate">
        <template slot-scope="scope">{{ scope.row.gmtCreate | formatTime }}</template>
      </el-table-column>

      <el-table-column align="center" :label="$t('product.list.description')" max-width="300" prop="description" />

      <el-table-column align="center" :label="$t('product.list.operation')" width="280" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="handleController(scope.row)">{{ $t('product.controller.list.controller') }}</el-button>
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">{{ $t('product.list.edit') }}</el-button>
          <el-button type="danger" style="margin:5px" size="mini" @click="handleDelete(scope.row)">{{ $t('product.list.deletE') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-tooltip placement="top" :content="$t('product.list.toTop')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<script>
import { listProduct, deleteProduct, deleteProductForce } from '@/api/product'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination'

export default {
  name: 'ProductList',
  components: { BackToTop, Pagination },
  data() {
    return {
      listQuery: {
        pageNo: 1,
        pageSize: 20,
        title: ''
      },
      total: 3,
      listLoading: false,
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询
    getList() {
      this.listLoading = true
      listProduct(this.listQuery)
        .then(res => {
          this.listLoading = false
          this.list = res.data.items
          this.total = res.data.total
        }).catch(failres => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    // 更新
    handleUpdate(row) {
      this.$router.push({ path: '/product/upsert', query: { productId: row.id }})
    },
    // 删除 TODO LANG
    handleDelete(row) {
      this.$confirm('您确定要删除产品"' + row.title + '"吗?此过程不可逆,是否继续', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(res => {
        deleteProduct(row.id)
          .then(res => {
            this.$notify.success({
              title: '成功',
              message: '删除成功!'
            })
            this.getList()
          })
      }, failres => {
        console.log(failres)
      }).catch(failres => {
        console.log(failres)
        if (failres.data.errno === 12008) {
          // 若该产品下有设备，则进一步询问是否强制删除
          this.$confirm('产品"' + row.title + '"下有活跃的设备,是否强制删除(同时删除设备)', '警告', {
            confirmButtonText: '强制删除',
            cancelButtonText: '取消'
          }).then(res => {
            deleteProductForce(row.id)
              .then(res => {
                this.$notify.success({
                  title: '成功',
                  message: '删除成功!'
                })
                this.getList()
              })
          })
        }
      })
    },
    // 增加
    handleCreate(row) {
      this.$router.push({ path: '/product/upsert' })
    },
    // 遥控器
    handleController(row) {
      this.$router.push({ path: '/product/controller/list', query: { productId: row.id }})
    }
  }
}
</script>
